<template>
  <div class="form-container" v-loading="loading">
    <!-- 企业详情 -->
    <div class="info">
      <div class="item">
        <div class="label">企业名称：</div>
        <div class="value">{{ companyInfo.com_name }}</div>
      </div>
      <div class="item">
        <div class="label">联系人：</div>
        <div class="value">{{ companyInfo.user_name }}</div>
      </div>
      <div class="item">
        <div class="label">联系电话：</div>
        <div class="value">{{ companyInfo.phone }}</div>
      </div>
      <div class="item">
        <div class="label">Feijiu会员：</div>
        <div class="value">{{ companyInfo.vip_name }}({{ companyInfo.vip_start_time }} - {{ companyInfo.vip_end_time }})</div>
      </div>
    </div>
    <div class="info form-info">
      <div class="item">
        <div class="label">是否已加微信：</div>
        <div class="value">{{ companyInfo.is_add_wx === 1 ? '否' : '是' }}</div>
      </div>
      <div class="item">
        <div class="label">签约方式：</div>
        <div class="value">{{ companyInfo.sign_method === 1 ? '线上' : '线下' }}</div>
      </div>
      <div class="item">
        <div class="label">合同：</div>
        <el-upload :disabled="true" :on-preview="handlePreview" list-type="picture" class="upload" accept="image/jpeg, image/png, .pdf" action="" :file-list="uploadFileList"> </el-upload>
      </div>
      <div class="item">
        <div class="label">签约时间：</div>
        <div class="value">{{ companyInfo.sign_time }}</div>
      </div>
      <div class="item">
        <div class="label">跟进人：</div>
        <div class="value">{{ companyInfo.follow_name }}</div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="form">
      <div class="item">
        <div class="title">
          <div class="title-left">回收区域</div>
          <div class="title-right" @click="handleShowSignZoneSelect">
            <template v-if="zoneList.length === 0">
              添加
              <i class="el-icon-plus"></i>
            </template>
            <template v-else>
              编辑
              <i class="el-icon-edit-outline"></i>
            </template>
          </div>
        </div>
        <div class="content">
          <div class="empty" v-if="zoneList.length === 0">不限区域</div>
          <div class="zone-list" v-else>
            <div class="item" v-for="(item, index) in zoneList" :key="item.id">
              <p class="label">
                {{ item.zone_name }}
              </p>
              <i class="el-icon-close icon-delete" @click="handleZoneDelete(index, item.id)"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title">
          <div class="title-left">回收物资</div>
          <div class="title-right" @click="handleShowSignCateSelect">
            添加
            <i class="el-icon-plus"></i>
          </div>
        </div>
        <div class="content">
          <div class="empty" v-if="cateList.length === 0">不限类型</div>
          <div class="zone-list" v-else>
            <div class="item" v-for="item in cateList" :key="item.id">
              <p class="label">
                {{ item.cate_name }}
              </p>
              <i class="el-icon-edit-outline icon-delete" @click="handleCateEdit(item.id)"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title">
          <div class="title-left">关键词</div>
          <div class="title-right" @click="handleShowKeywords">
            添加
            <i class="el-icon-plus"></i>
          </div>
        </div>
        <div class="content">
          <div class="empty" v-if="keywordsList.length === 0">暂无数据</div>
          <div class="zone-list" v-else>
            <div class="item" v-for="(item, index) in keywordsList" :key="item.id">
              <p class="label">
                {{ item }}
              </p>
              <i class="el-icon-close icon-delete" @click="handleKeywordsDelete(index, item.id)"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title">
          <div class="title-left">消息提醒免打扰</div>
          <div class="title-right"></div>
        </div>
        <div class="content">
          <div class="line line1">
            <div class="label">每日20:00至次日7:00将不会收到生意推送提醒</div>
            <el-switch v-model="alarm" @change="handleAlarmChange"></el-switch>
          </div>
          <template v-if="alarm">
            <div class="line line2">
              <div class="label">以下提醒方式在该时间段内免打扰</div>
            </div>
            <div class="line">
              <el-checkbox-group v-model="alarmCheckList" @change="handleAlarmChange">
                <el-checkbox :label="1">APP推送</el-checkbox>
                <el-checkbox :label="2">微信服务通知 </el-checkbox>
                <el-checkbox :label="3">短信</el-checkbox>
                <el-checkbox :label="4">AI电话 </el-checkbox>
                <el-checkbox :label="5">人工联系 </el-checkbox>
              </el-checkbox-group>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- 签约回收区域 -->
    <el-dialog title="回收区域" :visible.sync="showSignZoneSelect" :modal="false">
      <SignZoneSelect v-if="showSignZoneSelect" :default="zoneList" :user-id="companyInfo.user_id" @confirm="handleZoneConfirm" @close="showSignZoneSelect = false" />
    </el-dialog>

    <!-- 签约回收物资 -->
    <el-dialog title="回收物资" :visible.sync="showSignCateSelect" :modal="false">
      <SignCateSelect v-if="showSignCateSelect" :user-id="companyInfo.user_id" :id="cateId" :cate-list="cateList" @confirm="handleCateConfirm" @delete="handleCateDelete" @close="showSignCateSelect = false" />
    </el-dialog>

    <!-- 签约关键词 -->
    <el-dialog title="关键词" :visible.sync="showKeywords" :modal="false">
      <SignKeywords v-if="showKeywords" :user-id="companyInfo.user_id" :keywords="keywordsList" @confirm="handleKeywordsConfirm" @close="showKeywords = false" />
    </el-dialog>
  </div>
</template>
<script>
import { apiLoveWordsSave, apiLoveWords, apiSignZoneList, apiSignZoneDel, apiSignUserDetail, apiSignCateList, apiVipAlarmSet } from '@/api/assetsDisposal'
import { isMobile } from '@/utils/validate.js'
import SignZoneSelect from './SignZoneSelect'
import SignCateSelect from './SignCateSelect'
import SignKeywords from './SignKeywords'

export default {
  props: {
    id: String,
  },
  components: { SignZoneSelect, SignCateSelect, SignKeywords },
  data() {
    var validaMobile = (rule, value, callback) => {
      if (value && !isMobile(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      companyInfo: {},
      uploadFileList: [],
      fileList: [],
      // 预览
      showPreview: false,
      previewFile: {},
      pdfCover: 'https://recycleimg.feijiu.net/zft/mini/1706230913392.png',

      // 回收区域
      showSignZoneSelect: false,
      zoneList: [],

      // 回收物
      showSignCateSelect: false,
      cateList: [],
      cateId: '',

      // 提醒
      alarmCheckList: [],
      alarm: false,
      // 关键字
      showKeywords: false,
      keywordsList: [],
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    // 获取详情
    getDetail() {
      const info = {
        id: this.id,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiSignUserDetail(formData).then((res) => {
        if (res.code !== 200) {
          return
        }
        this.companyInfo = res.data
        this.fileList = res.data.files.map((item) => {
          const arr = item.split('.')
          const type = arr[arr.length - 1]
          if (type === 'pdf') {
            return {
              name: item,
              url: this.pdfCover,
              type: 'application/pdf',
              fileUrl: item,
            }
          } else {
            return {
              name: item,
              url: item,
              type: 'image/',
              fileUrl: item,
            }
          }
        })
        this.uploadFileList = [...this.fileList]

        this.alarm = parseInt(this.companyInfo.no_alarm_set) === 1 ? true : false
        if (this.companyInfo.no_alarm_choice) {
          this.alarmCheckList = []
          this.companyInfo.no_alarm_choice.split(',').forEach((item) => {
            if (item && !isNaN(item) && !isNaN(parseInt(item))) {
              this.alarmCheckList.push(parseInt(item))
            }
          })
        }

        this.getSignZoneList()
        this.getSignCateList()
        this.getkeywords()
      })
    },
    // 签约回收区域列表
    getSignZoneList() {
      const info = {
        user_id: this.companyInfo.user_id,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiSignZoneList(formData).then((res) => {
        if (res.code === 200) {
          this.zoneList = res.data || []
        }
      })
    },
    // 签约回收分类列表
    getSignCateList() {
      const info = {
        user_id: this.companyInfo.user_id,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiSignCateList(formData).then((res) => {
        if (res.code === 200 && res.data) {
          this.cateList = res.data
        }
      })
    },
    // 获取用户偏好关键词
    getkeywords() {
      const info = {
        user_id: this.companyInfo.user_id,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiLoveWords(formData).then((res) => {
        if (res.data.words) {
          this.keywordsList = res.data.words.split(',')
        }
      })
    },
    // 添加/编辑回收区域
    handleShowSignZoneSelect() {
      this.showSignZoneSelect = true
    },
    // 确定回收区域
    handleZoneConfirm() {
      this.showSignZoneSelect = false
      this.getSignZoneList()
    },
    // 删除区域
    handleZoneDelete(index, id) {
      this.zoneList.splice(index, 1)
      const info = {
        id,
        send_to_feijiu: 1,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiSignZoneDel(formData)
    },
    // 添加/编辑回收物资
    handleShowSignCateSelect() {
      this.cateId = ''
      this.showSignCateSelect = true
    },
    // 确定回收物资
    handleCateConfirm() {
      this.showSignCateSelect = false
      this.getSignCateList()
    },
    // 删除回收物资
    handleCateDelete(id) {
      this.showSignCateSelect = false
      this.cateList = this.cateList.filter((item) => item.id !== id)
    },
    // 编辑回收物资
    handleCateEdit(id) {
      this.cateId = id
      this.showSignCateSelect = true
    },
    // 提醒设置
    handleAlarmChange() {
      const info = {
        user_id: this.companyInfo.user_id,
        sts: this.alarm ? 1 : 0,
        choice: this.alarmCheckList,
        send_to_feijiu: 1,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiVipAlarmSet(formData)
    },
    // 预览图片
    handlePreview(file) {
      window.open(file.fileUrl)
    },
    // 添加关键词
    handleShowKeywords() {
      this.showKeywords = true
    },
    // 确认关键词
    handleKeywordsConfirm() {
      this.showKeywords = false
      this.getkeywords()
    },
    // 删除关键词
    handleKeywordsDelete(index, id) {
      this.keywordsList.splice(index, 1)
      const form = {
        user_id: this.companyInfo.user_id,
        words: this.keywordsList.join(','),
      }
      const formData = new FormData()
      for (let key in form) {
        formData.set(key, form[key])
      }
      apiLoveWordsSave(formData)
    },
  },
}
</script>
<style scoped lang="scss">
.form-container {
  padding: 0 16px;
}
.el-input {
  width: auto !important;
  margin-right: 10px !important;
}
.not-vip {
  margin-left: 50px;
  color: #f56c6c;
}
.info {
  background: #efefef;
  padding: 12px 16px;
  font-size: 12px;
  color: #333333;
  margin-bottom: 16px;
  .item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: 2;
    .label {
      width: 100px;
      flex-shrink: 0;
    }
  }
  &.form-info {
    background: none;
  }
}

.preview {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    max-height: 500px;
    max-width: 100%;
  }
}

.form {
  padding-bottom: 50px;
  font-size: 12px;
  .item {
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 40px;
      background: #efefef;
      padding: 0 16px;
      .title-left {
        font-weight: bold;
      }
      .title-right {
        color: #409eff;
        cursor: pointer;
      }
    }
    .content {
      padding: 12px 16px;
      min-height: 100px;
      .empty {
        width: 100%;
        text-align: center;
        padding-top: 24px;
      }
      .line {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .line1 {
        margin-bottom: 20px;
      }
      .line2 {
        margin-bottom: 10px;
        font-weight: bold;
      }
    }
  }
}

.zone-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  .item {
    background: #efefef;
    padding: 0 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 10px;
    line-height: 10px;
    .icon-delete {
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
.upload {
  margin-bottom: 30px;
}
::v-deep .el-upload {
  display: none;
}
</style>
